import { carSafetyIndexTrend } from '@/api/safeIndexApi';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { useRequest } from 'ahooks';
import { Card, Select, Tooltip } from 'antd';
import { useRef, useState } from 'react';
import { PanelProps } from '../../SafeCarIndexInfo/Panel';
import ChartTrend from '../Trend';
const dateTypeOptions = [
  {
    label: '近一月',
    value: '1',
  },
  {
    label: '近三月',
    value: '2',
  },
  {
    label: '近半年',
    value: '3',
  },
];

const tipContent = (
  <div>
    <div>安全指数一周记录一次</div>
    <div>
      <span>近一月: </span>
      <span>展示最近4次的数据</span>
    </div>
    <div>
      <span>近三月: </span>
      <span>展示最近12次的数据</span>
    </div>
    <div>
      <span>近半年: </span>
      <span>展示最近24次的数据</span>
    </div>
  </div>
);

export default function CarSafeIndexTrend(props: PanelProps) {
  const cardDom = useRef<HTMLDivElement>(null);
  const trendRef = useRef<any>(null);
  const [params, setParams] = useState<any>({
    queryType: 1,
    safetyIndexCarId: props.safetyIndexCarId,
  });
  const { loading } = useRequest(
    async () => {
      return await carSafetyIndexTrend(params);
    },
    {
      refreshDeps: [params],
      onSuccess(res: any) {
        if (res.code == '200') {
          const dateData = res.data?.map((v: any) => {
            return v.date;
          });
          const valData = res.data?.map((v: any) => {
            return v.safetyIndex;
          });
          trendRef?.current?.setData({
            dateData: dateData || [],
            valData: valData || [],
          });
        }
      },
    },
  );

  const cardTitle = (
    <>
      安全指数趋势图
      <Tooltip placement="top" title={tipContent}>
        <QuestionCircleOutlined style={{ marginLeft: 5, color: '#999999' }} />
      </Tooltip>
      <Select<string>
        bordered={false}
        value={dateTypeOptions[Number(params.queryType) - 1].label}
        onChange={(value, options) => {
          setParams({
            safetyIndexCarId: props.safetyIndexCarId,
            queryType: value,
          });
        }}
        options={dateTypeOptions}
        placement="bottomLeft"
        getPopupContainer={(target) => {
          if (cardDom.current) {
            return cardDom.current;
          } else {
            return target;
          }
        }}
      />
    </>
  );
  return (
    <Card
      bordered={false}
      ref={cardDom}
      style={{ overflow: 'hidden' }}
      title={cardTitle}
      headStyle={{
        border: 0,
        fontSize: 18,
        fontWeight: 'bold',
      }}
      bodyStyle={{
        paddingRight: 24,
        paddingTop: 12,
        paddingLeft: 24,
        paddingBottom: 12,
        height: '100%',
        overflow: 'hidden',
      }}
    >
      <ChartTrend unit="分" innerRef={trendRef}></ChartTrend>
    </Card>
  );
}
